<ng-container *ngIf="TabItems">
  <div
    [ngClass]="{
      'lv-tabs-bar': true,
      'lv-tabs-bar-card': lvType === 'card',
      'lv-tabs-bar-step': lvType === 'step',
      'lv-tabs-bar-panel': lvType === 'panel'
    }"
  >
    <div #tabWrapper class="lv-tabs-wrapper">
      <div
        #tabContainer
        class="lv-tabs-container"
        [ngClass]="{
          'lv-tabs-container-shadow-left': lvType === 'panel' && isScroll && -scrollDistance > 0,
          'lv-tabs-container-shadow-right':
            lvType === 'panel' && isScroll && -scrollDistance < tabListWidth - tabContainerWidth
        }"
      >
        <div
          #tabList
          [ngClass]="{
            'lv-tabs-list': true,
            'lv-tabs-list-card': lvType === 'card',
            'lv-tabs-list-panel': lvType === 'panel',
            'lv-tabs-list-step': lvType === 'step'
          }"
        >
          <ng-container *ngFor="let tab of TabItems; let i = index">
            <div
              *ngIf="!tab.hidden"
              class="lv-tab-item"
              [ngClass]="{ 'lv-tab-item-active': activeIndex == i }"
              [class]="tab.lvTabClass"
              [attr.disabled]="tab.lvDisabled ? '' : null"
              [attr.tabId]="tab.tabId"
              (click)="tabClick(i, tab.lvDisabled)"
            >
              <span>
                <ng-container *ngIf="typeUtils.isRealString(tab.lvTitle)">{{ tab.lvTitle }}</ng-container>
                <ng-container
                  *ngIf="typeUtils.isTemplateRef(tab.lvTitle)"
                  [ngTemplateOutlet]="tab.lvTitle"
                ></ng-container>
              </span>
              <span
                *ngIf="tab.lvClosable === null ? lvClosable === true : tab.lvClosable === true"
                (click)="removeTab(i, tab.lvDisabled)"
                class="lv-tab-close"
              >
                <i lv-icon="lv-icon-close" [lvDisabled]="tab.lvDisabled"></i>
              </span>
              <div
                *ngIf="lvType === 'panel'"
                class="lv-tab-item-line"
                [style]="{ left: getPanelLineStyle(i) + 'px' }"
              ></div>
            </div>
            <span *ngIf="!tab.hidden && lvType === 'default'" class="lv-tab-spliter"></span>
          </ng-container>
          <div
            *ngIf="lvType !== 'step' && lvType !== 'panel'"
            class="lv-tab-item-activated"
            [style]="{ width: activeItem.width + 'px', left: activeItem.left + 'px' }"
          ></div>
        </div>
      </div>
      <div *ngIf="isScroll" class="lv-tabs-dropdown">
        <span
          *ngIf="!lvTabDropdownContent"
          #dropdown="lvDropdown"
          lv-dropdown
          lvDropdownPanelClass="lv-tabs-dropdown-panel"
          [lvDropdownMenus]="dropdownMenu"
          [lvDropdownPosition]="'bottomRight'"
          (lvDropdownShow)="dropdownShow()"
          (lvDropdownHide)="dropdownHide()"
          (lvDropdownItemClick)="dropdownClick($event)"
        >
          <lv-select-trigger-icon
            class="lv-tabs-icon"
            [ngClass]="{ 'lv-tabs-icon-visible': dropdownVisible }"
            [lvOpen]="dropdownVisible"
          ></lv-select-trigger-icon>
        </span>
        <lv-popover
          *ngIf="lvTabDropdownContent"
          #popover
          lvTrigger="click"
          [lvContent]="dropdownContent"
          [lvShowArrow]="false"
          lvPosition="bottomRight"
          [lvBeforeOpen]="popoverShow"
          [lvBeforeClose]="popoverClose"
        >
          <lv-select-trigger-icon
            class="lv-tabs-icon"
            [ngClass]="{ 'lv-tabs-icon-visible': popoverVisible }"
            [lvOpen]="popoverVisible"
          ></lv-select-trigger-icon>
        </lv-popover>
      </div>
    </div>
    <div #extraContent class="lv-tabs-extra">
      <ng-container *ngIf="lvTabBarExtraContent !== null" [ngTemplateOutlet]="lvTabBarExtraContent"></ng-container>
    </div>
  </div>

  <div #tabBody class="lv-tabs-body">
    <ng-container *ngFor="let tab of TabItems; let i = index">
      <div
        class="lv-tab-content"
        #content
        [ngClass]="{ 'lv-tab-content-no-padding': !hasChildNodes(content) }"
        *ngIf="activeIndex == i && !tab.hidden"
      >
        <ng-container [ngTemplateOutlet]="tab.lazyContent || tab.content"></ng-container>
      </div>
    </ng-container>
  </div>

  <ng-template #dropdownContent>
    <ng-container [ngTemplateOutlet]="lvTabDropdownContent" [ngTemplateOutletContext]="{ dropdownMenu }"></ng-container>
  </ng-template>
</ng-container>
